<template>
  <div class="train-search">
    <div class="area">
      <label class="search-title">往返城市</label>
      <el-input class="search-city" v-model="goCity" placeholder="中文/英文/首字母"></el-input>
      <label class="search-title"><i class="el-icon-sort"></i></label>
      <el-input class="search-city" v-model="backCity" placeholder="中文/英文/首字母"></el-input>
    </div>
    <div class="area">
      <label class="search-title">出发日期</label>
      <el-date-picker
        v-model="leaveDate"
        type="date"
        placeholder="选择日期">
      </el-date-picker>
      <el-checkbox v-model="trainChecked">只看高铁/动车</el-checkbox>
    </div>
    <div class="area">
      <div class="search-button">
        <el-button type="danger" icon="el-icon-search">搜索</el-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "Train",
  data() {
    return {
      goCity: "北京",
      backCity: "上海",
      leaveDate: "",
      trainChecked: false
    };
  }
};
</script>
<style lang="scss" scoped>
.train-search {
  padding: 2.5em;
  color: #666;
  .area {
    padding: 0.5em 0;
    .el-date-editor {
      margin-right: 1em;
      width: 10em;
    }
    .search-title {
      padding: 0 1em;
      .el-icon-sort {
        margin: 0 0.5em;
        transform: rotate(90deg);
      }
    }
    .search-city {
      width: 10em;
    }
    .search-button {
      padding-left: 5em;
    }
  }
}
</style>
